import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text} from '@tarojs/components'
import Navbar from '../../components/Navbar'
import {connect} from '@tarojs/redux'
import * as actions from '../../actions/wx'
import Loading from '../../components/Loading'
import downLoad from '../../utils/download'
import './index.scss'


@connect(state => state.wx, {...actions})
class Share extends Component {

  config = {
    navigationBarTitleText: '',
    navigationStyle: "custom",
    // 定义需要引入的第三方组件
    usingComponents: {
      'painter': '../../wxComponents/painter/painter', // 书写第三方组件的相对路径
    }
  }

  state = {
    loading: true,
    createPoster: {},
    imagePath: '',
    visible: false,
  }
  static options = {
    addGlobalClass: true
  }

  componentWillMount() {

  }

  onShareAppMessage(options) {
    const {url, id} = this.$router.params
    const {imagePath} = this.state
    let shareObj = {
      // title: `${title}`,
      title: `倩优卓`,
      path: `${url}?id=${id}`,
      imageUrl: imagePath,
      // imageUrl:bannerImage.url,
      success: () => {
        // 转发成功
        Taro.showToast({
          title: "分享成功",
          icon: 'success',
          duration: 2000
        })
      },
      fail: () => {
        // 分享失败
        Taro.showToast({
          title: "分享失败",
          icon: 'close',
          duration: 2000
        })
      },
    }
    return shareObj
  }

  componentDidMount() {
    this.paint()
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  render() {
    const {createPoster, loading} = this.state
    return (
      <View>
        <Navbar type="icon" fixed={true}></Navbar>
        <View>
          {/* customStyle='margin-left:40rpx' */}
          <Loading spinning={loading} desc={'海报生成中'}>
            <View className="painter">
              <painter palette={createPoster} onImgOK={this.onImgOK.bind(this)}/>
            </View>
            {
              !loading && <View className='buttons'>
                <Button type="primary" size="mini" full onClick={this.saveImage.bind(this)} className="button button1">
                  <Text className="icon icon-upload_icon"></Text><Text>保存海报</Text>
                </Button>
                <Button size='mini' plain full onClick={this.send.bind(this)} open-type="share"
                        className="button button2">
                  <Text className="icon icon-weixinfill"></Text><Text>直接发送给好友</Text>
                </Button>
              </View>
            }
          </Loading>
        </View>
      </View>
    )
  }


  send() {

  }

  onImgOK(e) {
    console.log('渲染完成', e)
    this.setState({
      loading: false
    })
    // Taro.hideLoading({
    //   complete:()=>{
    //     this.setState({
    //       loading:false
    //     })
    //   }
    // })
    this.setState({
      imagePath: e.detail.path
    })
    // setTimeout(()=>{
    //   this.setState({
    //     loading:false
    //   })
    // },3000)
    // Taro.hideLoading()
    // setTimeout(()=> {
    //   Taro.hideLoading()
    //
    // }, 1000)
  }


  paint() {
    this.setState({
      loading: true
    }, () => {
      // Taro.showLoading({
      //   title: '海报生成中',
      // })
      let {title, bannerImage, url, id} = this.$router.params
      this.props.dispatchWxQrcode(`${url}?id=${id}`).then(res => {
        console.log('bannerImage', bannerImage)
        const {shareCodeImage} = this.props
        this.setState({
          visible: true,
          createPoster: {
            width: '600rpx',
            height: '670rpx',
            background: '#fff',
            views: [{
              type: 'image',
              url: bannerImage.replace(LOGO_SPLIT, ''),
              css: {
                width: '600rpx',
                height: '450rpx',
              }
            },
              {
                type: 'text',
                text: title,
                css: {
                  top: `460rpx`,
                  fontSize: '20rpx',
                  // color: '#fff',
                  color: '#000',
                  fontWeight: 'bold',
                  align: 'left',
                  width: '400rpx',
                  left: '200rpx',
                  // right: '0',
                  maxLines: 1,
                  lineHeight: '40rpx'
                }
              },
              {
                type: 'image',
                url: shareCodeImage,
                css: {
                  width: '180rpx',
                  height: '200rpx',
                  mode: 'scaleToFill',
                  top: '450rpx',
                }
              },
              {
                type: 'image',
                url: 'https://qiniuqianshop.fortunemy.top/souyisou.png',
                css: {
                  width: '420rpx',
                  height: '160rpx',
                  mode: 'scaleToFill',
                  top: '490rpx',
                  left: '180rpx'
                }
              },
              {
                type: 'text',
                text: "倩优卓 品质保证",
                css: {
                  left: '300rpx',
                  top: '380rpx',
                  fontSize: '20rpx',
                  color: '#fff',
                  width: '600rpx',
                  align: 'center',
                }
              }
            ]
          }
        })
        // Taro.getImageInfo({
        //   src:shareCodeImage,
        //   success:(res)=>{
        //

        //   }
        // })

      }).catch(err => {
        Taro.showToast({title: '二维码获取失败', duration: 200})
        Taro.hideLoading()
        Taro.navigateBack({
          delta: 1
        })
      })
    })
  }

  saveImage() {
    downLoad(this.state.imagePath, 'image', true)
  }

}

export default Share
